<template>
  <div class="home1">
    <img class="logo" src="../assets/logo.png" alt="">
    <el-menu
      :default-active="activeIndex"
      background-color="#ffffff"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      router
    >
      <el-menu-item index="/index/home" route>首页</el-menu-item>
      <el-menu-item index="/index/about" route>关于我们</el-menu-item>
      <el-menu-item index="/index/info" route>客房展示</el-menu-item>
      <!-- <el-menu-item index="/index/online" route>在线预定</el-menu-item> -->
      <!-- <el-menu-item index="/index/news" route>新闻动态</el-menu-item> -->
      <el-menu-item index="/index/mine" route>我的</el-menu-item>

      <!-- <el-menu-item class="exit" index="/login" route>退出</el-menu-item> -->

    </el-menu>
    <div class="exit" @click="exit">退出</div>

      <router-view />

  </div>
</template>

<script>
// @ is an alias to /src

export default {
  data() {
    return {
      activeIndex: "/index/home",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
     //退出
     exit() {
      this.$router.push("/login");
    },
  },

  components: {},
};
</script>

<style scoped>
.el-menu {
  padding-left: 800px;
  height: 80px;
  /* float: right; */
}
.el-menu--horizontal>.el-menu-item{
  
  font-size: 20px;
  height: 80px;
  line-height: 80px;
}
.exit{
  width: 200px;
  height: 80px;
  position: absolute;
  top: 0;
  right:0;
  margin-right: 50px;
  font-size: 20px;
  line-height: 80px;
  cursor: pointer;
}
/* .exit{
  margin-left: 200px;
} */
</style>


<style>
.logo{
  position: absolute;
  margin-left: 100px;
  /* width: 80px; */
  height: 80px;
  width: 100px;
  z-index: 10;
}


</style>